import React, { Component } from 'react'
import { Card, Avatar, Row, Col, Tooltip, Empty } from 'antd'
import { connect } from 'react-redux'
import '../../../less/index.less'
import { withRouter } from 'react-router-dom'
import getQuizType from '../../../constant/quiz-type-app-address'
import { FormattedMessage } from 'react-intl'

class MyStudentTaskStatusCell extends Component {
  goHomeworkPage (task, assignment, studentId) {
    const addressSuffix = getQuizType(assignment.type)
    const address = `/learn${addressSuffix}`

    const quizzes = assignment.selectedQuizzes
    return `${address}/tutor/program/${task.programId}/task/${task.id}/student/${studentId}/assignment/${assignment.id}/quiz/${quizzes[quizzes.length - 1].quizId}`
  }

  userName (username) {
    return username && (username).length > 3
      ? (username).substr(0, 3) + '...'
      : username
  }

  getStudentsQuizCell () {
    const {sectionStatus, task, section} = this.props

    return sectionStatus.sort((a, b) => a.submitTime - b.submitTime).map((userInfo, index) => {
      const userName = userInfo.name ? userInfo.name : userInfo.username
      const assignmentQuizUrl = this.goHomeworkPage(task, section, userInfo.id)

      return <Col span={6} key={index} className='margin-b-1'>
        <Tooltip title={userName}>
          <a href={assignmentQuizUrl}>
            <Avatar style={{backgroundColor: 'rgb(25, 115, 186)'}} icon='user' className='click-icon'/>
            <div className='link-text'>{this.userName(userName)}</div>
          </a>
        </Tooltip>
      </Col>
    })
  }

  render () {
    const {sectionStatus, status} = this.props
    return (
      <Card noHovering>
        <Row className='margin-t-2' style={{minHeight: '200px'}}>
          {
            sectionStatus.length > 0
              ? this.getStudentsQuizCell()
              : <Empty />
          }
        </Row>
        <h4 className='text-center'>{<FormattedMessage id={status}/>}</h4>
      </Card>
    )
  }
}

const mapStateToProps = ({settings}) => ({settings})

export default withRouter(connect(mapStateToProps, null)(MyStudentTaskStatusCell))
